<template>
    <div id="file">
        <div id="head">
            <div>
                <el-button class="upload" type="primary" @click="upload"><i class="el-icon-upload">上传文件</i></el-button>
                <el-button class="refresh" @click="refresh"><i class="el-icon-refresh">刷新</i></el-button>
                <input class="input" type="search" placeholder=" 按文件名查找" v-model="input"/>
                <p @click="findFileSearch" style="display: inline-block;">
                    <i class="el-icon-search"></i>
                </p>
        </div>
  
        <div id="main">
            <el-table :data="tableData">
                <template>
                    <el-table-column prop="documentName" label="文档名称" width="200"></el-table-column>
                    <el-table-column prop="documentAddress" label="文档地址" width="200"></el-table-column>
                    <el-table-column label="操作" width="200">
                        <template #default="scope">
                            <el-button class="download" @click="download(scope.row)" type="text" size="small"><i class="el-icon-download"></i>下载</el-button>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </div>
    </div>
    <!-- 分页 -->
    <span id="footPage">
                  <el-button type="button" @click="jumpFirstPage" id="firstPage">首页</el-button>
                  <el-pagination
                  :page-size="5" 
                  :current-page="currentPage" 
                  @current-change="handleCurrentChange" 
                  layout="total,prev, pager, next"
                  prev-text="上一页"
                  next-text="下一页"
                  :total="total"
                  id="page" >
                  </el-pagination>
                  <el-button type="button" @click="jumpLastPage" id="lastPage">尾页</el-button>
              </span>
      <!-- 弹窗 -->
      <el-dialog title="上传文件" :visible.sync="detailVisible" width="35%">
        <div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="文档名称">
              <el-col :span="21">
                <el-input v-model="form.documentName"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="文档地址">
              <el-upload class="upload-demo" drag :action="string" :on-change="getFile" :http-request="onFileSubmit" :on-success="handleSucess">
                <i class="el-icon-upload"></i>
                <div class="documentAddress">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <!-- <el-button @click="onFileSubmit" class="onFileSubmit">上传</el-button> -->
              <el-button class="reSetSubmit" @click="close">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
  </div>
      <!-- 弹窗 -->
  </template>
  <script>
  import { getAllFile } from '@/api/file'
  import request from '@/utils/request';

  export default {
    name: "ClientFile",
    data() {
      return {
        currentPage:1,
        total:0,
        detailVisible: false,
        input: "",
        tableData: [],
        form: {
          documentName: "",
        },
        file:"",
        filePath:"",
        string:""
      };
    },
    methods: {
      findFileSearch(){},
      close(){
        this.detailVisible=false
      },
      getAll(){
              const that=this;
              getAllFile(this.currentPage,5,2).then(function(response){
                  console.log(response)
                  console.log(response.data.data)
                  that.tableData=response.data.data.list
                  console.log(response.data.list)
                  that.total = response.data.data.total
              });
          },
      handleSucess(result){
        console.log(result)
        this.filePath = result.data
      },
      refresh() {
        this.$router.go(0);
        // location.reload();
      },
      upload() {
        this.detailVisible = true;
      },
      // 下载
      async download(val){
        console.log()
          window.open('http://localhost:8081/file/down?documentName=' + val.documentName)
      },
      getFile(file){
        this.file = file
        console.log(file)
      },
      //提交上传文件
      onFileSubmit() {
        console.log(1)
        let fileFormData = new FormData();
        fileFormData.append('file', this.file.raw); //file是值，就是要传的文件，
        console.log(fileFormData)
        request({
          method:"post",
          url:"file/upload",
          headers: {'Content-Type': 'multipart/form-data'},
          data:fileFormData
        }).then(function(response){
            console.log(response)
        })
      },
      sel(){
              const that=this;
              getAllFile(this.currentPage,5,2).then(function(response){
                      console.log(response)
                      that.tableData=response.data.data.list
                      // console.log(response.data.data)
                      that.total = response.data.data.total
                      console.log(that.total)
              });
          },
          // 获取当前页数
          handleCurrentChange(val){
              console.log(`当前页数：${val}`)
              this.currentPage = val
              console.log(this.currentPage)
              this.sel();
          },
           // 跳转首页
          jumpFirstPage(){
              this.currentPage = 1
              this.getAll()
          },
          // 跳转尾页
          jumpLastPage(){
              this.currentPage = Math.ceil(this.total / 5)
              this.getAll()
          }
    },
    mounted: function () {
      this.getAll();
    },
  };
  </script>
  
  <style scoped>
  *{
    margin: 0px;
    padding: 0px;
  }
  #file{
    width: 610px;
  }
  .upload{
    padding: 10px;
    margin-left: 10px;
  }
  #head{
    margin-top: 10px;
  }
  #main{
    margin-top: 10px;
    margin-left: 10px;
    width: 950px;
  }
  .refresh{
    padding: 10px;
  }
  .input{
    padding: 10px;
    display: inline-block;
    margin-left: 70px;
  }
  p{
    position: relative;
    top: 1px;
    left: 0px;
    width: 38px;
    height: 37px;
    text-align: center;
    line-height: 35px;
    border: 1px solid gray;
    border-left: none;
    border-radius: 0px 5px 5px 0px;
    background-color: rgb(247, 242, 242);
  }
  .el-table{
    width: 100%;
  }
  #page{
    position: relative;
    left: 330px;
    top: 270px;
  }
  #firstPage{
    position: relative;
    left: 290px;
    top: 293px;
  }
  #lastPage{
    position: relative;
    left: 540px;
    top: 243px;
  }
  </style>